<html class="ui-mobile">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>Vella App</title>
    <link rel="stylesheet"  href="css/jquery.mobile-1.4.1.min.css" />
    <link rel="stylesheet" href="css/responsiveslides.css" />
    <link rel="stylesheet" href="css/jquery.mobile.external-png-1.4.1.css" />
    <link rel="stylesheet" href="css/custom.css" />
    <link rel="stylesheet" href="css/slider/owl.carousel.css" />
    <link rel="stylesheet" href="css/slider/owl.theme.css" />
    <link rel="stylesheet" href="css/slider/owl.transitions.css" />
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-1.3.4.css" />
    <link rel="stylesheet" href="css/jquery.fs.zoomer.css" />
</head>
<body onload="onLoad()" style="" class="ui-mobile-viewport ui-overlay-a">

<div data-role="page" id="index" tabindex="0" class="wipe_element_right ui-page-theme-a">
     <!-- left panel-->
    <div data-role="panel" id="mypanel">
        <div class="ui-panel-inner">
            <h3>Vella App</h3>
            <ul data-role="listview" data-inset="true">
                <li>
                    <label>Tên sản phẩm</label>
                    <input type="text" name="product_name" class="product_name" id="product_name">
                </li>
                <li>
                    <label>Chọn danh mục</label>
                    <select id="select_cat"  class="select_cat">
                        <option value=""></option>
                    </select>
                </li>
                <li>
                    <label>Chọn tỉnh thành</label>
                    <select id="select_loc" class="select_loc" >
                        <option value=""></option>
                    </select></li>
                <li>
                    <label>Cần bán/ Mua</label>
                    <select id="select_type" class="select_type" >
                        <option value="">Cần Bán/ Mua</option>
                        <option value="0">Cần Bán</option>
                        <option value="1">Cần Mua</option>
                    </select>
                </li>
                <li>
                    <input type="button" value="Tìm" id="btn_search">
                </li>
            </ul>
        </div>
    </div>
    <!-- content -->
    <!-- fixed header-->
    <div class="header nav_fixed">
        <div class="logo"><img src="img/logo.png"></div>
        <div class="right_header">
            <ul>
                <li class="width20 "><a href="#mypanel_right" id="" class="icon_profile"></a></li>
                <li class="width20 "><a href="addproduct.html" id="addproduct" class="icon_add"></a></li>
                <li class="width20"><a href="#mypanel" class="icon_seacrh"></a></li>
            </ul>
        </div>
    </div>
    <!-- end fixed headr -->
    <div class="ui-content ui-bar-a margin_top55">
        <!--
        <div data-role="navbar">
            <ul>
                <li class="width20"><a href="#mypanel" class="paddingtop25 ui-btn  ui-btn-inline ui-btn-icon-left ui-icon-search">Tìm Kiếm Nâng Cao</a></li>
                <li class="width60 "><a href="addproduct.html" id="addproduct" class="paddingtop25 ui-btn  ui-btn-inline ui-btn-icon-left ui-icon-plus btn-yellow">Thêm Sản Phẩm</a></li>
                <li class="width20 "><a href="#mypanel_right" id="" class="paddingtop25 ui-btn  ui-btn-inline ui-btn-icon-left ui-icon-bars">Đăng Nhập</a></li>
            </ul>
        </div><!-- /navbar -->

        <input type="search" name="search-1" id="search-1" class="search_field" value="">

            <ul data-role="listview" id="ajax_table" class="ajax_table"  data-filter="false" data-filter-placeholder="Search Product" data-inset="true" >

            </ul>

        <!--
        <button class="ui-btn" id="load_more">Tải Thêm</button>
        -->
    </div>
    <!--right panel -->
    <div data-role="panel" id="mypanel_right" class="margin_top55" data-position="right" >
        <div class="ui-panel-inner">
            <ul data-role="listview" id="logged" data-inset="true">
                <li>
                    <a href="profile.html">
                        <img class="profile_img" src="">
                        <h2 class="profile_email"></h2>
                        <p class="profile_name">Lương Trí</p>
                    </a>
                </li>
                <li><a href="myproduct.html">Sản Phẩm Của Tôi</a></li>
                <!--
                <li><a href="#">Mạng Xã hội</a></li>
                -->
                <li><a id="btn_logout">Thoát</a></li>
            </ul>
            <ul class="login_form">
                <li><input type="text" id="log_email" placeholder="Email"></li>
                <li><input type="password" id="log_pass" placeholder="Mật Khẩu"></li>
                <li><input type="button" id="btn_log" value="Đăng Nhập"></li>
                <li><input type="button"  class="facebook-btn" id="btn_log_face" value="Đăng Nhập facebook"></li>

                <li></li>
                <li><a href="signup.html">Đăng Ký</a> </li>
                <li><a href="forgotpass.html">Quên mật khẩu</a></li>
                <li><input type="button" onclick="window.open('https://dl.dropboxusercontent.com/u/25125318/vellaapp/vellaandroidapp.apk', '_system');" value="Update"></li>
            </ul>



        </div>
    </div>
</div>
<div data-role="footer" id="footer" style="overflow:hidden;">
    <fieldset class="ui-grid-a">
        <div class="ui-block-a"><a href="#" id="footer_refresh" class="ui-btn ui-icon-refresh ui-btn-icon-top">Tải Lại</a></div>
        <div class="ui-block-b"><a href="#" id="footer_quit"  class="ui-btn ui-icon-power ui-btn-icon-top">Thoát</a></div>
    </fieldset>
    <fieldset class="ui-grid-a">
    </fieldset>
    <!--
    <fieldset class="ui-grid-a">
        <div class="ui-block-a"><a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a></div>
    </fieldset>
    -->
</div><!-- /footer -->
<div class="ui-panel-dismiss" data-panelid="panel-reveal"></div>
<div class="ui-panel-dismiss" data-panelid="panel-overlay"></div>
<div class="ui-panel-dismiss" data-panelid="panel-push"></div>
<script src="js/theme/jquery-1.10.2.js"></script>
<script src="js/theme/jquery.mobile-1.4.1.min.js"></script>
<script src="js/jquery.session.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/cordova-2.7.0.js"></script>
<script src="js/camera.js"></script>
<script src="js/theme/responsiveslides.js"></script>
<script src="js/process/custom.js"></script>
<script src="js/process/login.js"></script>
<script src="js/process/detaiproduct.js"></script>
<script src="js/process/addproduct.js"></script>
<script src="js/process/myproduct.js"></script>
<script src="js/process/editproduct.js"></script>
<script src="js/process/singleimageproductpage.js"></script>
<script src="js/process/singleimageproductpagezoom.js"></script>
<script src="js/process/search.js"></script>
<script src="js/process/profile.js"></script>
<script src="js/process/signup.js"></script>
<script src="js/process/addproductnotlogged.js"></script>
<script src="js/process/forgotpass.js"></script>
<script src="js/theme/jquery.timeago.js"></script>
<script src="js/process/update.js"></script>
<script src="js/theme/jquery.formatCurrency-1.4.0.js"></script>
<script src="js/theme/jquery.formatCurrency.all.js"></script>
<script src="js/slider/owl.carousel.js"></script>
<script src="js/theme/jquery.fs.zoomer.js"></script>
<script src="js/theme/jquery-ui-1.10.4.custom.js"></script>
<script src="js/openfb.js"></script>
<script src="js/process/facebooklogin.js"></script>
<script>
    function onLoad() {

        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {

        // Register the event listener
        document.addEventListener("menubutton", onMenuKeyDown, false);
        document.addEventListener("searchbutton", onSearchKeyDown, false);
       // document.addEventListener("backbutton", onBackKeyDown, false);
        checknetwork();
    }
    //check network
    function checknetwork(){
        var networkState = navigator.network.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';
        //if(states[Connection.UNKNOWN])
        //console.log(networkState);
        if(networkState == 'none'){
            alert( states[networkState] );
        }

    }
    // Handle the back button
    //
    /*function onBackKeyDown() {
        var activePage = $.mobile.activePage[0].id;
        if(activePage == "index"){

        }
    }*/
    // Handle the menu button
    //
    function onMenuKeyDown() {
        $('#footer').toggle();
    }
    // Handle the search button
    //
    function onSearchKeyDown(){
        var activePage = $.mobile.activePage[0].id;
        if(  $("#" + activePage + " #mypanel").hasClass("ui-panel-open")  == true){
            $("#" + activePage + " #mypanel").panel('close');
        }
        else{
            $("#" + activePage + " #mypanel").panel('open');
        }
        if( $("#" + activePage + " #mypanel_myproduct").hasClass("ui-panel-open")  == true){
            $("#" + activePage + " #mypanel_myproduct").panel('close');
        }else{
            $("#" + activePage + " #mypanel_myproduct").panel('open');
        }

    }

</script>
</body>
</html>